<template>
  <div>
    <scEcharts height="250px" :option="option"></scEcharts>
  </div>
</template>
<script setup>
import scEcharts from "./../scEcharts/index.vue";
import {onMounted, ref} from "vue";
import http from "@/utils/request";

const option = ref({
  tooltip: {
    trigger: "item",
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: ["55%", "70%"],
      itemStyle: {
        borderRadius: 5,
        borderColor: "#fff",
        borderWidth: 1,
      },
      data: [],
    },
  ],
})

const pie=ref({
  tooltip: {
    trigger: "item",
  },
  series: [
    {
      name: "访问来源",
      type: "pie",
      radius: ["55%", "70%"],
      itemStyle: {
        borderRadius: 5,
        borderColor: "#fff",
        borderWidth: 1,
      },
      data: [
        { value: 1048, name: "搜索引擎" },
        { value: 235, name: "直接访问" },
        { value: 180, name: "外部链接" },
      ],
    },
  ],
})

const props = defineProps({
  // 基础类型检查
  // （给出 `null` 和 `undefined` 值则会跳过任何类型检查）
  title: String,
  // 多种可能的类型
  model: String,
  dataKey: {
    type: String,
    default: "num"
  },
  labelKey:{
    type: String,
    default: "dayKey"
  }

})


onMounted(async () => {
  option.value.series[0].name = props.title


  let param = {};
  param.model = props.model;
  let res = await http.post("/data/list", param);
  if (res.code===200){
    option.value.series[0].data = res.data.map(item=> {
      let temp={};
      temp.name=item[props.labelKey];
      temp.value=item[props.dataKey];
      return temp;
    });
    console.info(option.value)

  }


})
</script>
<style scoped>

</style>
